<template>
  <div class="tools-wrapper" :class="{'right0':right0}">
    <a-popover placement="bottom" :getPopupContainer="getPopupContainer">
      <template slot="content">
        <div class="operation-item">
          <a-tooltip placement="left" :getPopupContainer="getPopupContainer">
            <template slot="title">
              自动巡航
            </template>
            <span class="iconfont icon-yijianxunhang icon" :style="{'color':flyStatus?'#4c9bfb':'#ffffff'}"
              @click="setFlyStatus">
            </span>
          </a-tooltip>
        </div>
        <div class="operation-item">
          <a-tooltip placement="left" :getPopupContainer="getPopupContainer">
            <template slot="title">
              数据面板
            </template>
            <span class="iconfont icon-shujumianban icon" :style="{'color':chartPanelStatus?'#4c9bfb':'#ffffff'}"
              @click="setChartPanelStatus">
            </span>
          </a-tooltip>
        </div>
      </template>
      <div class="gongjuxiang">
        <span class="iconfont icon-gongjuxiang icon"></span>
        <div class="txt">工具箱</div>
      </div>
    </a-popover>
    <!-- <div class="gongju">
      <span class="iconfont icon-yijianxunhang" :style="{'color': status?'#1ddad9':'#ffffff'}"></span>
      <div class="txt">自动巡航</div>
    </div> -->
  </div>
</template>

<script>
import Bus from '@/utils/bus'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Tools',
  props: {
    right0: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['chartPanelStatus', 'flyStatus'])
  },
  methods: {
    ...mapMutations(['SET_chartPanelStatus', 'SET_flyStatus']),
    getPopupContainer (triggerNode) {
      return triggerNode
    },
    setChartPanelStatus () {
      this.SET_chartPanelStatus(!this.chartPanelStatus)
    },
    setFlyStatus () {
      let flag = !this.flyStatus
      this.SET_flyStatus(flag)
      Bus.$emit('postMessage', flag)
    }
  }
}
</script>

<style lang="less" scoped>
.tools-wrapper {
  position: fixed;
  right: 500px;
  top: 130px;
  .gongjuxiang {
    text-align: center;
    .icon {
      cursor: pointer;
      font-size: 36px;
      color: #ffffff;
    }
    .txt {
      color: #ffffff;
      font-size: 14px;
    }
    .icon-gongjuxiang:hover {
      color: #4c9bfb;
    }
  }
  /deep/.ant-popover {
    .ant-popover-content {
      .ant-popover-arrow {
        border-top-color: rgba(0, 0, 0, 0.6);
        border-left-color: rgba(0, 0, 0, 0.6);
      }
      .ant-popover-inner {
        background-color: rgba(0, 0, 0, 0.6);
        .ant-popover-inner-content {
          padding: 12px 12px;
        }
      }
    }
  }
  .operation-item {
    /deep/.ant-tooltip {
      .ant-tooltip-inner {
        font-size: 26px;
        white-space: nowrap;
      }
    }
    
  }
  .gongju {
    line-height: 1;
    cursor: pointer;
    .iconfont {
      font-size: 40px;
      color: #ffffff;
    }
    .txt {
      color: #ffffff;
      font-size: 14px;
      margin-top: 8px;
    }
  }
}
.right0 {
  right: 24px;
}
</style>
